<template>
    <div>
        <div class="case-desc">
            <p>阶梯线图又称方波图，它使用水平和垂直的线来连接两个数据点，而普通折线图则直接将两个点连接起来。阶梯线图能够很好地表达数据的突变。</p>
            <p>在 ECharts 中，系列的 step 属性用来表征阶梯线图的连接类型，它共有三种取值：'start'、'middle' 和 'end'，分别表示在当前点，当前点与下个点的中间点，下个点拐弯。</p>
        </div>
        <div class="case-code-container">
            <div class="code-container">
                <div id="line-case-8-1" class="chart-container">

                </div>
                <div id="line-case-8-2" class="chart-container">

                </div>
                <div id="line-case-8-3" class="chart-container">

                </div>
            </div>
            <highlightjs class="code" lang="js" :code="code"></highlightjs>
        </div>
    </div>
</template>

<script setup>
    import { code } from './code/case8.js';
    import * as echarts from 'echarts';
    import { onMounted } from 'vue';
    onMounted(() => {
        // 基于准备好的dom，初始化echarts实例
        const dom1 = document.getElementById('line-case-8-1');
        const dom2 = document.getElementById('line-case-8-2');
        const dom3 = document.getElementById('line-case-8-3');
        const myChart1 = echarts.init(dom1, 'dark', { renderer: 'svg' });
        const myChart2 = echarts.init(dom2, 'dark', { renderer: 'svg' });
        const myChart3 = echarts.init(dom3, 'dark', { renderer: 'svg' });

        // 绘制图表
        /**
         * @param {  "middle" | "start" | "end" }step
         */
        function getOption (step) {
            /** @type {echarts.EChartsOption} */
            const option = {
                title: { text: `阶梯线图 step:${step}` },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                },
                yAxis: { type: 'value' },
                series: [
                    {
                        name: '衬衫的销量',
                        type: 'line',
                        data: [5, 20, 36, 10, 10, 20],
                        step, // ★★★系列的 step 属性用来表征阶梯线图的连接类型，它共有三种取值：'start'、'middle' 和 'end'
                        label: {
                            show: true,
                            position: 'top',
                        },
                    },
                ],
            };
            return option;
        }
        myChart1.setOption(getOption('start'));
        myChart2.setOption(getOption('middle'));
        myChart3.setOption(getOption('end'));
    });
</script>

<style lang="scss" scoped>
.code-container {
    width: min-content;

    .chart-container {
        display: inline-block;
    }
}

.code {
    height: 100%;
}
</style>
